<template>
  <div class="input__footer flex-center flex-gap-6">
    <div
      v-if="hasDeepThinkModel"
      class="action__btn cursor flex-center flex-gap-4 fs-12"
      :class="{
        active: isSupportDeppThink
      }"
      @click="toggleDeepThink"
      >
      <svg-icon icon-class="deep-think" class="fs-16"></svg-icon>
      <span>深度思考(R1)</span>
    </div>
    <el-tooltip
      placement="top"
      title="标题"
      width="200"
      trigger="hover">
      <div
        class="action__btn cursor flex-center flex-gap-4 fs-12"
        :class="{
          active: chatStore.onlineSwitch,
          disabled: !isSupportOnlineSearch,
          }"
        @click="toggleOnlineSwitch"
        >
        <svg-icon icon-class="internet" class="fs-16"></svg-icon>
        <span>联网搜索</span>
      </div>
      <p slot="content">{{ onlineSearchText }}</p>
    </el-tooltip>
    <div class="send__btn" @click="$emit('send')" title="发送">
        <svg-icon icon-class="send-btn" class="fs-16"></svg-icon>
      </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: '',
  computed: {
    ...mapGetters(['chatStore', 'userInfo']),
    isSupportOnlineSearch () {
      const isAgent = !!this.chatStore.agent
      return !!this.chatStore.currentModel?.search_enabled && !isAgent && this.chatStore.docSummarize.status === ''
    },
    hasDeepThinkModel () {
      return this.chatStore.models.some(item => item.thinking_enabled) && this.chatStore.docSummarize.status === ''
    },
    isSupportDeppThink () {
      return !!this.chatStore.currentModel?.thinking_enabled
    },
    onlineSearchText () {
      const onlineSwitch = this.chatStore.onlineSwitch
      const onlineEnable = this.chatStore.currentModel?.search_enabled
      const isAgent = !!this.chatStore.agent
      if (!onlineEnable || isAgent || this.chatStore.docSummarize.status !== '') {
        return `当前${isAgent ? '智能体' : '模型'}不支持联网搜索`
      }
      if (onlineSwitch) {
        return '已接入互联网，会在需要时通过互联网搜集资料'
      }
      return '已关闭互联网访问权限'
    }
  },
  watch: {
    isSupportDeppThink (v) {
      this.$xz('HtmlClickReport', { ReportID: v ? 7634 : 7635 })
    }
  },
  methods: {
    toggleOnlineSwitch () {
      if (!this.isSupportOnlineSearch) return
      const online = !this.chatStore.onlineSwitch
      this.$store.dispatch('chat/setOnlineSwitch', online)
      this.$xz('HtmlClickReport', { ReportID: online ? 7636 : 7637 })
    },
    showChatModel () {
      // 需要延时处理，因为models弹窗做了外部区域点击关闭操作
      setTimeout(() => {
        this.$store.dispatch('chat/setChatStore', { showModels: 'models' })
      }, 0)
    },
    // eslint-disable-next-line sonarjs/cognitive-complexity
    toggleDeepThink () {
      const models = this.chatStore.models
      // 取消深度思考
      if (this.isSupportDeppThink) {
        const targets = models.filter(item => !item.thinking_enabled)
        if (targets.length === 0) {
          this.$PsMessage({ message: '抱歉，不支持取消深度思考，当前没有非深度思考模型' })
          return
        }
        const target = targets[0]
        const notVipAndDeepThink = targets.filter(item => !item.is_must_vip)
        if (notVipAndDeepThink.length === 0) {
          this.$PsMessage({ message: '请选择心仪的模型' })
          this.showChatModel()
          return
        }
        this.$store.dispatch('chat/setCurrentModel', { model: target, type: 'chat' })
        return
      }
      const deepThinkModels = models.filter(item => item.thinking_enabled)
      if (deepThinkModels.length > 1) {
        this.$PsMessage({ message: '请选择深度思考模型' })
        this.showChatModel()
        return
      }
      if (deepThinkModels.length === 0) {
        this.$PsMessage({ message: '请选择心仪模型' })
        this.showChatModel()
        return
      }
      const targt = deepThinkModels[0]
      const isMustVip = targt.is_must_vip
      const isMember = this.userInfo.is_member
      if (isMustVip && !isMember) {
        this.$PsMessageBox({
          message: `该模型为VIP专享，马上开通享更多特权吧！`,
          title: '权益提示',
          confirmButtonText: '开通VIP',
          cancelButtonText: !this.hasLogin ? '会员登录' : '知道了',
          width: 312,
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              this.$gotoMember({
                'xz': () => {
                  this.$xz('HtmlClickReport', { ReportID: 8503 })
                  this.$xz('xz_set_stat_id', 8503)
                }
              })
            }
            if (action === 'cancel' && !this.hasLogin) {
              this.$gotoLogin()
            }
            done()
          }
        })
        return
      }
      this.$store.dispatch('chat/setCurrentModel', { model: targt, type: 'chat' })
    }
  }
}
</script>

<style lang="scss" scoped>
.input__footer {
  flex: 0 0 auto;
  padding-bottom: 16px;
}
.send__btn {
  margin-left: auto;
  width: 36px;
  height: 24px;
  // background: rgba($color: #2FC670, $alpha: 1.0);
  border: 1px solid $color-primary3;
  color: $color-white;
  background: $color-primary3;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
  &:hover {
    background: $color-primary3-active;
    border-color: $color-primary3-active;
    color: $color-white;
  }
}
.action__btn {
  padding: 0 10px;
  height: 28px;
  align-items: center;
  border: 1px solid rgba($color: $color-white, $alpha: 0.2);
  border-radius: 6px;
  color: rgba($color: $color-white, $alpha: 0.5);
  transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out;
  &:hover, &.active {
    color: rgba($color: $color-primary3, $alpha: 1);
    border-color: rgba($color: $color-primary3, $alpha: 1)
  }
  &.disabled {
    opacity: 0.7;
    color: rgba($color: $color-white, $alpha: 0.5);
    border: 1px solid rgba($color: $color-white, $alpha: 0.2);
  }
}
</style>
